<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>KOI EDITOR</title>
    <link rel="stylesheet" type="text/css" href="/css/style.css">
    <link rel="stylesheet" type="text/css" href="/css/font-awesome.min.css">
</head>
<body>
<header>
    <div class="nav">
        <ul>
            <li><a>New</a></li>
            <li><a>Open</a></li>
            <li><a>Save</a></li>
            <li><a>Reset</a></li>
            <li><a target="_blank" href="help.html">Help</a></li>
        </ul>
    </div>
</header>
<section>
    <div class="side">
        <ul>
            <li><a><i class="fa fa-circle" title="start node"></i></a></li>
            <li><a><i class="fa fa-circle-o" title="synchronizer"></i></a></li>
            <li><a><i class="fa fa-dot-circle-o" title="end node"></i></a></li>
            <li><a><i class="fa fa-tasks" title="end node"></i></a></li>
        </ul>
    </div>
    <div id="designer_viewport">
        <div id="canvas_container">
            <canvas id="content">
                content
            </canvas>
        </div>
    </div>
    <div class="side-right">
        <div class="entry">
            <div class="text1">
                <input type="text">:
            </div>
            <div class="text2">
                <input type="text">
            </div>
            <div class="add">
                <i class="fa fa-plus"></i>
            </div>
        </div>

        <div class="table">
            <div class="head">head</div>
            <div class="body">
                <div class="key">
                    key
                </div>
                <div class="value">
                    value
                </div>
            </div>
        </div>
    </div>
</section>
<footer>
    <div class="breviary">
        <canvas id="aerial"></canvas>
    </div>
    <div class="right">
        <div class="con">
            <div><label>x:</label><input type="text"></div>
            <div><label>y:</label><input type="text"></div>
            <div><label>method:</label><input type="text"></div>
            <div><label>name:</label><input type="text"></div>
        </div>
        <div class="c">
            <div>
                <label>type:</label>
                <select>type
                    <option>asss</option>
                    <option>asss</option>
                </select>
            </div>
            <div>
                <label>syn_straategy:</label>
                <select>syn_straategy
                    <option>syn_straategy</option>
                    <option>syn_straategy</option>
                </select>
            </div>
            <div class="last">
                <div class="text1">
                    <input type="text">:
                </div>
                <div class="text1">
                    <input type="text">
                </div>
                <div class="add">
                    <i class="fa fa-plus"></i>
                </div>
            </div>
        </div>
        <div class="url">
            <div><label>url:</label><textarea></textarea></div>
        </div>
    </div>
</footer>
<script src="/js/jquery.min.js"></script>
<script src="/js/angular.js"></script>
<script src="/js/koi_editor.js"></script>
<script>
    $(function () {
        var canvas = $('canvas#content').attr({
            width: 1000,
            height: 1000
        });

        canvas.css({
            padding: '1000px'
        });

        var ctx = canvas.get(0).getContext('2d');
        ctx.fillStyle = 'rgb(192, 80, 77)'; // 红
        ctx.fillRect(0, 0, 1000, 1000);
        ctx.strokeStyle = '#FFF';
        ctx.strokeRect(1, 1, 998, 998);


        $('canvas#aerial').attr({
            width: $(this).parent().width(),
            height: $(this).parent().height()
        });

        canvas.focus();
    });
</script>
</body>
</html>